import 'package:favoritecate/core/model/meal_model.dart';
import 'package:flutter/material.dart';

class MealDetailContent  extends StatelessWidget {
  FYMealModel _model; //私有
  MealDetailContent(this._model);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          buildImage(),
          buildTitle(context,'制作材料'),
          buildMakeMaterial(context),
          buildTitle(context,'制作步骤'),
          buildMakeSetup(context)
        ],
      ),
    );
  }


  //横幅图片
  Widget buildImage(){
    return Container(
      width: double.infinity,
        child: Image.network(_model.imageUrl)
    );
  }

  //制作材料
  Widget buildMakeMaterial(BuildContext context){
    /*
    * 在Column中嵌套使用ListView会报错 Failed assertion: line 1687 pos 12: 'hasSize'
    * 因为ListView会尽可能大的占据空间大小，但是当不知道占据多大时 会报错
    * Column希望每一个子Widget有一个明确的高度，那怎么去解决这个问题？
    * 1.可以通过设置Container的高度，但这种做法不好
    * 2.ListView有一个明确的高度，通过设置ListView中shrinkWrap属性，当值为true时
    * ListView大小为内容大小，而不是尽可能的大
    *
    * 注意：ListView会有默认内边距，可以通过设置padding内边距为zero 就没有内边距了
    *
    * Container中Color属性不能与BoxDecoration中border中color重复的
    *
    * */

//    return Container(
//      width: MediaQuery.of(context).size.width - 30,
//      padding: EdgeInsets.all(10),
//      decoration: BoxDecoration(
//        color: Colors.white,
//        border: Border.all(color: Colors.grey),
//        borderRadius: BorderRadius.circular(8)
//      ),
//      child: ListView.builder(
//        padding: EdgeInsets.zero,
//        shrinkWrap: true,
//        physics: NeverScrollableScrollPhysics(),
//        itemCount: _model.ingredients.length,
//          itemBuilder: (ctx,index){
//            return Card(
//              color: Colors.amber,
//              child: Padding(
//                padding: const EdgeInsets.symmetric(horizontal: 10,vertical: 5),
//                child: Text(_model.ingredients[index]),
//              ),
//            );
//          }
//      ),
//    );
    return buildContainer(
      context: context,
      child: ListView.builder(
          padding: EdgeInsets.zero,
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemCount: _model.ingredients.length,
          itemBuilder: (ctx,index){
            return Card(
              color: Theme.of(context).accentColor,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10,vertical: 5),
                child: Text(_model.ingredients[index]),
              ),
            );
          }
      )
    );
  }

  //制作步骤
  Widget buildMakeSetup(BuildContext context){
    return buildContainer(
      context: context,
      child: ListView.separated(
          padding: EdgeInsets.zero,
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          separatorBuilder: (ctx,index){
            return Divider();
          },
          itemCount: _model.steps.length,
          itemBuilder: (ctx,index){
            return ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.orangeAccent,
                child: Text('#${index+1}'),
              ),
              title: Text(_model.steps[index]),
            );
          }
      )
    );
  }

  //标题
  Widget buildTitle(BuildContext context,String title){
    return Container(
      padding: EdgeInsets.symmetric(vertical: 20),
        child: Text(title,style:Theme.of(context).textTheme.display3.copyWith(fontWeight:FontWeight.bold))
    );
  }

  Widget buildContainer({BuildContext context,Widget child}){
   return Container(
      width: MediaQuery.of(context).size.width - 30,
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(8)
      ),
      child: child
    );
  }
}
